<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 防止浮动元素父元素高度塌陷的三个方法</title>
	</head>
	<style>
		*{padding: 0;margin: 0;}
		.main{overflow: auto;}
		.main2:after{content:"";display:block;clear:both;height:0;}
		.main3{overflow:hidden;zoom: 1;}
		.left{float: left;width: 50%;background: red;}
		.right{float: right;width: 50%;background: yellow;}
		.footer{width: 100%;background: fuchsia;color: #FFFFFF;text-align: center;}
	</style>
	<body>
		<div class="main">
			<div class="left">aaaaaaaaaaaaa</div>
			<div class="right">bbbbbbbbbbbbb</div>
		</div>
		<div class="footer">11111</div>
		<div class="main2">
			<div class="left">aaaaaaaaaaaaa</div>
			<div class="right">bbbbbbbbbbbbb</div>
		</div>
		<div class="footer">11111</div>
		<div class="main3">
			<div class="left">aaaaaaaaaaaaa</div>
			<div class="right">bbbbbbbbbbbbb</div>
		</div>
	</body>
</html>
<script src="jquery.js"></script>
<script>
	var mainH = $('.main').height();
	var main2H = $('.main2').height();
	var main3H = $('.main3').height();
	console.log(mainH)
	console.log(main2H)
	console.log(main3H)
</script>
